<template>
	<div :class="curClassName" :style="curStyle">
		<div class="content">
			<van-field
				type="text"
				:class="editorClassName"
				:disabled="editorDisabled"				
				v-model="phoneNumber"
				:placeholder="$t('layoutelement.login.phoneplaceholder', '输入手机号')"
				@blur="veriPhoneNumber"
			></van-field>
			<van-button :disabled="disabled" @click="getVeriCode()">{{
				disabled
					? `${delay}s ${$t(
							'layoutelement.login.getcodeafter',
							'重新获取验证码'
					  )}`
					: $t('layoutelement.login.getcode', '获取验证码')
			}}</van-button>
		</div>
		<van-notice-bar
			v-show="verifyError"
			wrapable
			color="red"
			:scrollable="false"
			:text="$t('layoutelement.login.phonestyleerror', '电话号码格式错误')"
		/>
		<div class="code" v-show="show">
			<van-field
				type="text"
				:class="editorClassName"
				v-model="currentValue"
				:placeholder="$t('layoutelement.login.codeplaceholder')"
				@input="codeChange"
			></van-field>
		</div>
	</div>
</template>
<script setup lang="ts">
import { LoginNoteVerifyProps } from './login-note-verify';
import { Ref } from 'vue';
import { IEvent } from '@/core';

const props = defineProps(LoginNoteVerifyProps);

interface LoginNoteVerifyEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<LoginNoteVerifyEmit>();

/**
 * 项名称
 *
 * @memberof AppLoginNoteVerify
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 验证码当前值
 *
 * @memberof AppLoginNoteVerify
 */
const currentValue = computed(() => {
	return props.value;
});

/**
 * 当前容器样式
 *
 * @memberof AppLoginNoteVerify
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppLoginNoteVerify
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-login-note-verify': true
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 手机号
 *
 * @type {*}
 * @memberof AppLoginNoteVerify
 */
const phoneNumber: Ref<string> = ref('');

/**
 * 校验失败
 * @type {*}
 * @memberof AppLoginNoteVerify
 */
const verifyError: Ref<boolean> = ref(false);

/**
 * 是否禁用获取验证码按钮
 *
 * @type {boolean}
 * @memberof AppLoginNoteVerify
 */
const disabled: Ref<boolean> = ref(false);

/**
 * 显示验证码输入框
 *
 * @type {boolean}
 * @memberof AppLoginNoteVerify
 */
const show: Ref<boolean> = ref(false);

/**
 * 延迟
 *
 * @type {number}
 * @memberof AppLoginNoteVerify
 */
const delay: Ref<number> = ref(60);

/**
 * 定时器
 *
 * @type {any}
 * @memberof AppLoginNoteVerify
 */
const timer: Ref<any> = ref(null);

/**
 * 编辑器类名
 *
 * @memberof AppLoginNoteVerify
 */
 const editorClassName = computed(() => {
    const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getEditorDynaClass();
	}
})

/**
 * @description 验证码输入变化
 * @memberof AppLoginNoteVerify
 */
const codeChange = ($event: any) => {
	const value = $event.target.value;
	emit('component-action', {
		name: props.name,
		action: 'valueChange',
		data: value,
	});
};

/**
 * @description 校验手机号
 * @memberof AppLoginNoteVerify
 */
const veriPhoneNumber = () => {
	if (phoneNumber.value) {
		verifyError.value = !/^1[3-9]\d{9}$/.test(phoneNumber.value);
	}
};

/**
 * @description 设置延迟时间
 * @memberof AppLoginNoteVerify
 */
const setDelay = () => {
	timer.value = setInterval(() => {
		if (delay.value > 0) {
			delay.value--;
		} else {
			delay.value = 60;
			disabled.value = false;
			clearInterval(timer.value);
		}
	}, 1000);
};

/**
 * @description 获取验证码
 * @memberof AppLoginNoteVerify
 */
const getVeriCode = () => {
	veriPhoneNumber();
	if (phoneNumber.value && !verifyError.value) {
		// todo 获取验证码
		show.value = true;
		disabled.value = true;
		setDelay();
	}
};

/**
 * 禁用
 *
 * @memberof AppLoginInput
 */
 const editorDisabled = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.disabled;
	}
});

</script>
